<template>
  <div class="selectInfo">
    <div class="glass">
      <div class="select d-flex jc-between pointer" @click="showItem = !showItem">
        <div class="name">{{ treeData.select }}</div>
        <div v-if="showItem == true" class="arrowU"></div>
        <div v-else class="arrowD"></div>
      </div>
      <div v-if="showItem == true" class="treeContent">
        <div
          v-for="(item, index) in treeData.list"
          :key="index"
          class="mainNode"
        >
          <div class="d-flex ai-center">
            <img
              class="mainCheck pointer"
              :src="mainIndex == index ? checked : uncheck"
              alt=""
              @click="mainCheck(index)"
            />
            <div :class="['name', mainIndex == index ? 'nameActived' : '']">
              {{ item.name }}
            </div>
          </div>
          <div
            v-for="(item1, index1) in item.children"
            :key="index1"
            class="subNode d-flex"
          >
            <img
              class="nodeImg"
              :src="item1.actived ? checkedNode : uncheckNode"
              alt=""
            />
            <div :class="['subname', item1.actived ? 'nameActived' : '']">
              {{ item1.name }}
            </div>
            <div class="subCheck d-flex ai-center">
              <img
                class="pointer"
                :src="item1.actived ? checked : uncheck"
                alt=""
                @click="subCheck(index, index1)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  watch,
  onMounted,
  onUnmounted,
} from "vue";
import {clone} from "@/utils/common";

// 声明类型
export default defineComponent({
  props: {
    data: {
      type: Object,
      require: true,
    },
  },
  components: {},
  setup(props, context) {
    //变量
    const uncheck = require("@/assets/img/uncheck.png");
    const checked = require("@/assets/img/checked.png");
    const checkedNode = require("@/assets/img/checkedNode.png");
    const uncheckNode = require("@/assets/img/uncheckNode.png");
    const showItem = ref(true);
    const treeData = reactive({
      select:'',
      list:[],
      isMultiple:true
    })
    const mainIndex = ref(props.data.index)
    
    // 监听
    watch(props.data, (val) => {
      treeData.select = val.select
      treeData.list = val.list
      treeData.isMultiple = val.isMultiple == false?val.isMultiple:true
    });
    //生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //methods
    //父节点点击 全选/全不选
    const mainCheck = (index) => {
      mainIndex.value = index 
      treeData.list.forEach((item,index1)=>{
        if(index1 != index){
          treeData.list[index1].children.forEach((item1) => {
            item1.actived = false;
          })
        }else{
          let AllChecked = treeData.list[index1].children.every(ele=>ele.actived == true)
          if(AllChecked){
            treeData.list[index1].children.forEach((item1) => {
              item1.actived = false;
            })
            mainIndex.value = null
          }else{
            treeData.list[index1].children.forEach((item1) => {
              item1.actived = true;
            })
          }
          
        }
      })
      
      checkChange();
    };

    //子节点点击 选中/不选中当前节点
    const subCheck = (index, index1) => {
      treeData.list[index].children[index1].actived =!treeData.list[index].children[index1].actived
      mainIndex.value = treeData.list[index].children.some(item=>item.actived == true)?index:null
      if(treeData.isMultiple){
        treeData.list.forEach((item,index2)=>{
          if(index2 != index){
            treeData.list[index2].children.forEach((item1) => {
              item1.actived = false;
            });
          }
        })
      }else{
        treeData.list.forEach((item,index2)=>{
          treeData.list[index2].children.forEach((item1,index3) => {
            if(index != index2 || index3 != index1){
              item1.actived = false;
            }
          });
        })
      }
      
      checkChange();
    };

    const hasChecked = (index) => {
      return treeData.list[index].children.some((item) => item.actived == true);
    };

    const checkChange = () => {
      let arr = []
      treeData.list.forEach((item) => {
        item.children.forEach((item1) => {
          if (item1.actived) {
            arr.push(item1.name);
          }
        })
      })
      context.emit("treeChange", {arr:arr,name:mainIndex.value!=null?treeData.list[mainIndex.value].name:'',index:mainIndex.value})
    };

    // return
    return {
      showItem,
      uncheck,
      checked,
      checkedNode,
      uncheckNode,
      treeData,
      mainCheck,
      subCheck,
      hasChecked,
      mainIndex
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
@import "./tree.scss";
</style>
